<template>
  <div class="p-5">
    <el-card>
      <el-table :data="comments" stripe style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="articleTitle" label="文章标题" min-width="150">
          <template #default="scope">
            <el-link type="primary" :underline="false">{{ scope.row.articleTitle }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="评论者" width="120"></el-table-column>
        <el-table-column prop="content" label="评论内容" min-width="200">
          <template #default="scope">
            <div class="line-clamp-2">{{ scope.row.content }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="ipAddress" label="IP地址" width="150"></el-table-column>
        <el-table-column prop="createTime" label="评论时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="isChecked" label="审核状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.isChecked === 1 ? 'success' : 'warning'">
              {{ scope.row.isChecked === 1 ? '已审核' : '未审核' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '正常' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button 
              v-if="scope.row.isChecked !== 1"
              size="small" 
              type="success"
              @click="approveComment(scope.row)"
            >
              审核通过
            </el-button>
            <el-button 
              size="small" 
              :type="scope.row.status === 1 ? 'danger' : 'success'"
              @click="toggleCommentStatus(scope.row)"
            >
              {{ scope.row.status === 1 ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
<div class="mt-5 flex item-center justify-center" v-if="total > 0">
  <el-pagination
    :current-page="current"
    :page-size="size"
    :total="total"
    :page-sizes="[10, 20, 50]"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</div>
      
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCommentPageList, updateCommentStatus } from '@/api/admin/comment.js'

const comments = ref([])
const loading = ref(false)


// 脚本部分
const current = ref(1)
const size = ref(10)
const total = ref(0)

const fetchComments = async () => {
  loading.value = true
  try {
    const params = {
      current: current.value,
      size: size.value
    }
    const res = await getCommentPageList(params)
    if (res.success) {
      comments.value = res.data || []
      current.value = Number(res.current) || 1
      total.value = Number(res.total) || 0
      size.value = Number(res.size) || 10
    }
  } catch (err) {
    ElMessage.error(err.message || '获取评论列表失败')
  } finally {
    loading.value = false
  }
}

const handleSizeChange = (val) => {
  size.value = val
  current.value = 1
  fetchComments()
}

const handleCurrentChange = (val) => {
  current.value = val
  fetchComments()
}

// 审核通过评论
const approveComment = (row) => {
  ElMessageBox.confirm('确定要审核通过该评论吗？', '提示', {
    type: 'warning'
  }).then(async () => {
    try {
      await updateCommentStatus({
        id: row.id,
        isChecked: 1,
        status: row.status
      })
      ElMessage.success('审核通过成功')
      fetchComments()
    } catch (err) {
      ElMessage.error(err.message || '审核失败')
    }
  }).catch(() => {
    // 用户取消操作
  })
}

// 切换评论状态（禁用评论）
const toggleCommentStatus = (row) => {
  const newStatus = row.status === 1 ? 0 : 1
  const action = newStatus === 1 ? '启用' : '禁用'
  
  ElMessageBox.confirm(`确定要${action}该评论吗？`, '提示', {
    type: 'warning'
  }).then(async () => {
    try {
      await updateCommentStatus({
        id: row.id,
        status: newStatus,
        isChecked: row.isChecked
      })
      ElMessage.success(`${action}成功`)
      fetchComments()
    } catch (err) {
      ElMessage.error(err.message || `${action}失败`)
    }
  }).catch(() => {
    // 用户取消操作
  })
}

// 格式化时间
const formatDate = (dateString) => {
  // 如果是字符串，先转换为Date对象
  const date = new Date(dateString);
  // 格式化为本地时间字符串
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
}

onMounted(() => {
  fetchComments()
})
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>